<template>
    <div style="padding: 0 2rem;">
        <ul class="flex petition_title colorF font_s20 textC">
            <li class="flex1"><span>序号</span></li>
            <li class="flex3"><span>组织名称</span></li>
            <li class="flex2"><span>投诉渠道</span></li>
            <li class="flex5"><span>投诉标题</span></li>
            <li class="flex2"><span>投诉日期</span></li>
            <li class="flex2"><span>处理时间</span></li>
            <li class="flex2"><span>存在结果</span></li>
        </ul>
        <ul class="flex petition_content colorF font_s18 textC" v-for="item in dataList" v-bind:key="item.id">
            <li class="flex1 flexC JustifyContentC"><span>{{item.xh}}</span></li>
            <li class="flex3 flexC JustifyContentC textC" style="line-height:1.425rem;"><span>{{item.zzmc}}</span></li>
            <li class="flex2 flexC JustifyContentC"><span>{{item.tsqd}}</span></li>
            <li class="flex5 flexC JustifyContentC textL" style="line-height:1.425rem;"><span>{{item.tsbt}}</span></li>
            <li class="flex2 flexC JustifyContentC"><span>{{item.tsrq}}</span></li>
            <li class="flex2 flexC JustifyContentC"><span>{{item.clsj}}</span></li>
            <li class="flex2 flexC JustifyContentC"><span>{{item.czjg}}</span></li>
        </ul>
    </div>
</template>
<script>
export default {
  name: 'Petition',
  data () {
    return {
      dataList: [
        { 'xh': 1, 'zzmc': '上海南院实业发展有限公司福寿园海港陵园', 'tsqd': '962200热线平台', 'tsbt': '陈雅荣表示海港陵园的价格无法接受，诉求告知目的的涨价是否合法', 'tsrq': '2019/1/23', 'clsj': '2019/1/23', 'czjg': '满意' },
        { 'xh': 1, 'zzmc': '上海南院实业发展有限公司福寿园海港陵园', 'tsqd': '962200热线平台', 'tsbt': '陈雅荣表示海港陵园的价格无法接受，诉求告知目的的涨价是否合法', 'tsrq': '2019/1/23', 'clsj': '2019/1/23', 'czjg': '满意' },
        { 'xh': 1, 'zzmc': '上海南院实业发展有限公司福寿园海港陵园', 'tsqd': '962200热线平台', 'tsbt': '陈雅荣表示海港陵园的价格无法接受，诉求告知目的的涨价是否合法', 'tsrq': '2019/1/23', 'clsj': '2019/1/23', 'czjg': '满意' },
        { 'xh': 1, 'zzmc': '上海南院实业发展有限公司福寿园海港陵园', 'tsqd': '962200热线平台', 'tsbt': '陈雅荣表示海港陵园的价格无法接受，诉求告知目的的涨价是否合法', 'tsrq': '2019/1/23', 'clsj': '2019/1/23', 'czjg': '满意' },
        { 'xh': 1, 'zzmc': '上海南院实业发展有限公司福寿园海港陵园', 'tsqd': '962200热线平台', 'tsbt': '陈雅荣表示海港陵园的价格无法接受，诉求告知目的的涨价是否合法', 'tsrq': '2019/1/23', 'clsj': '2019/1/23', 'czjg': '满意' },
        { 'xh': 1, 'zzmc': '上海南院实业发展有限公司福寿园海港陵园', 'tsqd': '962200热线平台', 'tsbt': '陈雅荣表示海港陵园的价格无法接受，诉求告知目的的涨价是否合法', 'tsrq': '2019/1/23', 'clsj': '2019/1/23', 'czjg': '满意' },
        { 'xh': 1, 'zzmc': '上海南院实业发展有限公司福寿园海港陵园', 'tsqd': '962200热线平台', 'tsbt': '陈雅荣表示海港陵园的价格无法接受，诉求告知目的的涨价是否合法', 'tsrq': '2019/1/23', 'clsj': '2019/1/23', 'czjg': '满意' },
        { 'xh': 1, 'zzmc': '上海南院实业发展有限公司福寿园海港陵园', 'tsqd': '962200热线平台', 'tsbt': '陈雅荣表示海港陵园的价格无法接受，诉求告知目的的涨价是否合法', 'tsrq': '2019/1/23', 'clsj': '2019/1/23', 'czjg': '满意' },
        { 'xh': 1, 'zzmc': '上海南院实业发展有限公司福寿园海港陵园', 'tsqd': '962200热线平台', 'tsbt': '陈雅荣表示海港陵园的价格无法接受，诉求告知目的的涨价是否合法', 'tsrq': '2019/1/23', 'clsj': '2019/1/23', 'czjg': '满意' },
        { 'xh': 1, 'zzmc': '上海南院实业发展有限公司福寿园海港陵园', 'tsqd': '962200热线平台', 'tsbt': '陈雅荣表示海港陵园的价格无法接受，诉求告知目的的涨价是否合法', 'tsrq': '2019/1/23', 'clsj': '2019/1/23', 'czjg': '满意' }
      ]
    }
  }
}
</script>
<style scoped>
.petition_title {
    line-height: 2.5rem;
    border-radius: 10px 10px 0 0;
    background:#4ca5ab;
}
.petition_content {
    line-height: 3.625rem;
    border-radius: 5px;
    background: #27515f;
    margin: 0.825rem 0;
}
</style>
